<template>
	<div id="month">
		<component-header :title="title" :show-date="showDate" :path="path" :time="para.time"></component-header>
		<div class="profit">
			<div class="choose-date">
				<div class="show-date">{{this.para.time.split('').splice(4,2).join('')}}月/{{this.para.time.split('').splice(0,4).join('')}}</div>
				<popup-picker :title="'日期选择'" :column="2" :data="date" @change="chooseDate" :value="initialPicker">
					<img src="../../assets/images/time-pick.png" class="time-pick" @click="appEvent">
				</popup-picker>
			</div>
			<profit :time="para.time" :wrong-date="wrongDate"></profit>
		</div>
		<defeat :time="para.time"></defeat>
		<exceed :time="para.time"></exceed>
		<stock-ope :fathertime="para.time"></stock-ope>
		<my-performance :fathertime="para.time"></my-performance>
		<div id="abilitiesContainer">
			<ul class="abilities">
				<li v-for="item,index in abilities" :class="item.active" @click="switchAbility(item,index)">{{item.text}}</li>
			</ul>
			<div class="boxShadow"></div>
			<profit-ability v-if="abilities[0].show" :fathertime="para.time"></profit-ability>
			<choose-ability v-if="abilities[1].show" :time="para.time"></choose-ability>
			<control-ability v-if="abilities[2].show" :fathertime="para.time"  :parentDay="para.days"></control-ability>
			<perception-ability v-if="abilities[3].show" :fathertime="para.time"  :parentDay="para.days"></perception-ability>
			<risk-ability v-if="abilities[4].show" :time="para.time"></risk-ability>
		</div>
		<component-footer :page="page"></component-footer>
	</div>
</template>

<script>
	import Header from '@/components/Header'
	import Footer from '@/components/Footer'
	import PopupPicker from '@/components/popup-picker'
	import StockOpe from './month/StockOpe'
	import MyPerformance from './month/MyPerformance'
	import Profit from './month/Profit'
	import Defeat from './month/Defeat'
	import Exceed from './month/Exceed'
	import ProfitAbility from './month/ProfitAbility'
	import ChooseAbility from './month/ChooseAbility'
	import ControlAbility from './month/ControlAbility'
	import PerceptionAbility from './month/PerceptionAbility'
	import RiskAbility from './month/RiskAbility'
	import RemoteDAO from '@/common/remoteDAO'
	import Jquery from 'jquery'

	export default{
		data () {
			return {
				page:2,
				title:'月度分析',
				showDate:true,
				path:'/pages/Month',
				para:{
					time:'',
					days:''
				},
				abilities:[
					{
						name:'ProfitAbility',
						text:'收益能力',
						active:'active',
						show:true,
						tdapp:'002017'
					},
					{
						name:'ChooseAbility',
						text:'选股能力',
						active:'',
						show:false,
						tdapp:'002018'
					},
					{
						name:'ControlAbility',
						text:'仓位控制',
						active:'',
						show:false,
						tdapp:'002019'
					},
					{
						name:'PerceptionAbility',
						text:'盘面感知',
						active:'',
						show:false,
						tdapp:'002020'
					},
					{
						name:'RiskAbility',
						text:'风险控制',
						active:'',
						show:false,
						tdapp:'002021'
					},
				],
				date:[
					[],
					[]
				],
				initialPicker:[],
				wrongDate:false,
				lastDate:'',
				switchIndex:0,
				setMonIndex:0,
				clickStatus:0
			}
		},
		created(){
			for(let i=2016;i<=2018;i++){
				this.date[0].push(i);
			}
			for(let i=1;i<=12;i++){
				if(i<10){
					this.date[1].push('0'+i);
				}
				else{
					this.date[1].push(i);
				}
			}

			if(!this.$store.state.selectedDate){
				let self=this
		        let obj={"pagenum": '',"recent": ''}
		        RemoteDAO.callZL13100031(obj,self.ZL13100031)
			}
			this.switchIndex = this.$store.state.selectedTime
			this.initialPicker.push(this.$store.state.selectedDate.slice(0,4))
			this.initialPicker.push(this.$store.state.selectedDate.slice(4,6))
			this.para.time=this.$store.state.selectedDate
			this.lastDate=this.$store.state.lastDate

			this.tradeDate(this.initialPicker[0],this.initialPicker[1])

			this.setMonIndex = this.$store.state.monthIndex
			this.abilities.forEach(function(value){
				value.active='';
				value.show=false
			});
			this.abilities[this.setMonIndex].active='active';
			this.abilities[this.setMonIndex].show=true;
		},
		mounted(){
			TDAPP.onEvent('002029','');
			TDAPP.send();

			$(document).scrollTop(this.$store.state.monthTop)

			window.addEventListener('scroll',this.scrollFunction)
		},
		beforeDestroy(){
			window.removeEventListener('scroll',this.scrollFunction)
		},
		methods:{
	    monthDays(year, month) {
	      month = parseInt(month, 10)
	      let d = new Date(year, month, 0)
	      return d.getDate()
	    },
	    getNowDate() {
	      let today = new Date();
	      let year = today.getFullYear();
	      let month = today.getMonth();
	      let day = today.getDate();
	      let nowMonth = today.getMonth() < 9 ? '0' + (today.getMonth() + 1) : '' + (today.getMonth() + 1);
	      let nowDate = year + '' + nowMonth + '' + day
	      return nowDate
	    },
	    tradeDate(year,month) {
	      let y = parseInt(year);
	      let m = parseFloat(month);
	      let mDays = this.monthDays(y, m)
	      m = m < 10 ? '0' + m : m
	      let startDays = y + '' + m + '01';
	      let nDate = this.getNowDate();
	      let nowYear = parseFloat(nDate.substr(0, 4));
	      let nowMonth = parseFloat(nDate.substr(4, 2)) < 10 ? "0" + parseFloat(nDate.substr(4, 2)) : parseFloat(nDate.substr(4, 2));
	      let nowDay = parseFloat(nDate.substr(6, 2)) < 10 ? "0" + parseFloat(nDate.substr(6, 2)) : parseFloat(nDate.substr(6, 2));
	      let eDays;
	      if (y < nowYear || parseFloat(m) < nowMonth) {
	        eDays = y + '' + m + mDays
	      } else {
	        eDays = nowYear + '' + nowMonth + '' + nowDay
	      }
	      this.para.days = startDays + '~' + eDays;
	    },
			switchAbility:function(item,index){

				this.$store.dispatch('setMonthIndex', index);

				if(this.clickStatus != index){
						TDAPP.onEvent(this.abilities[index].tdapp,'');
						TDAPP.send();
				}
				this.clickStatus = index;

				this.abilities.forEach(function(value){
					value.active='';
					value.show=false
				});
				item.active='active';
				item.show=true;
			},
			chooseDate(arr){
				var year=arr[0];
				var month=arr[1];
				var dateString=year+month;
				let current=this.lastDate;

				this.tradeDate(year,month)

				if(arr[0]>parseInt(current.slice(0,4))){
					this.wrongDate=true;
				}
				else if(arr[0]==parseInt(current.slice(0,4)) && parseInt(arr[1])>parseInt(current.slice(4,6))){
					this.wrongDate=true;
				}
				else{
					this.wrongDate=false;
					this.para.time=dateString;
					this.$store.dispatch('setSelectedDate',dateString);
				}
			},
			ZL13100031(result){
		        let data=result.data;
		        let bigdata=JSON.parse(data).body[0].bigdata;
		        let specData=JSON.parse(bigdata).hits.hits;
		        let curMonth=specData.filter(value=>{
		        	return value._source.recent=='curmonth'
		        })
		        let initialDate=curMonth[0]._source.begin_date.slice(0,6)
		        if(!this.$store.state.selectedDate){
		        	this.$store.dispatch('setSelectedDate',initialDate)
		        	this.$store.dispatch('setLastDate',initialDate)
		        }
		        this.initialPicker.push(this.$store.state.selectedDate.slice(0,4))
				this.initialPicker.push(this.$store.state.selectedDate.slice(4,6))
		        this.para.time=this.$store.state.selectedDate
		        this.lastDate=this.$store.state.lastDate
			},
			scrollFunction(){
				this.$store.dispatch('setMonthTop',$(document).scrollTop())
			},
			appEvent(){
				TDAPP.onEvent('002016','');
				TDAPP.send();
			}
		},
		components:{
			'component-header':Header,
			'component-footer':Footer,
			'popup-picker':PopupPicker,
			'profit':Profit,
			'defeat':Defeat,
			'exceed':Exceed,
			'stock-ope':StockOpe,
			'my-performance':MyPerformance,
			'profit-ability':ProfitAbility,
			'choose-ability':ChooseAbility,
			'control-ability':ControlAbility,
			'perception-ability':PerceptionAbility,
			'risk-ability':RiskAbility
		}
	}
</script>

<style scoped>
	#month{
		margin-top: 0.44rem;
		background: #fff;
		z-index: 0;
		padding-bottom: 0.5rem;
	}
	.profit{
		height: 1.3rem;
		box-sizing: border-box;
		background-image: url(../../assets/images/banner.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		box-sizing: border-box;
		color: #fff;
	}
	.choose-date{
		height: 0.35rem;
		padding: 0.075rem 0.15rem;
		box-sizing: border-box;
		font-size: 0.14rem;
		opacity: 0.8;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.time-pick{
		padding-left: 0.2rem;
		height: 0.2rem;
	}
	#abilitiesContainer{
		margin-top: 0.4rem 0 0.2rem 0;
	}
	.abilities{
		height: 0.4rem;
		border-top: 1px solid #ddd;
		background: #fff;
		font-size: 0.12rem;
		color: #555;
		z-index: 2;
		position: relative;
		padding: 0 0.1rem;
		display: flex;
		justify-content: space-between;
	}
	.boxShadow{
		height: 1px;
		background: #ddd;
		box-shadow: 0 0 6px 0 rgba(34,34,34,0.4);
		z-index: 1;
		position: relative;
	}
	.abilities li{
		height: 100%;
		line-height: 0.4rem;
	}
	.abilities .active{
		color: #309fea;
		border-bottom: 4px solid #309fea;
		box-sizing: border-box;
	}
</style>
